<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="container">
        <h2 class="max-w-md mx-auto text-center text-gray-800 mb-12">static </h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="relative text-sm font-medium leading-6">
                <div
                    class="bg-purple-400/20 border border-purple-700/10 rounded-lg p-4 dark:bg-sky-900/70 dark:border-0">
                    <div
                        class="static bg-purple-400/20 border border-purple-700/10 p-4 h-32 dark:bg-sky-400/20 dark:border-0">
                        <p class="text-purple-700 dark:text-sky-200">Static parent</p>
                        <div
                            class="absolute bottom-0 left-0 bg-purple-500 shadow-lg rounded-lg p-4 text-white dark:bg-sky-500">
                            <p>Absolute child</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2 class="max-w-md mx-auto text-center text-gray-800 mb-12">relative </h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="relative text-sm font-medium leading-6">
                <div
                    class="bg-purple-400/20 border border-purple-700/10 rounded-lg p-4 dark:bg-sky-900/70 dark:border-0">
                    <div
                        class="relative bg-purple-400/20 border border-purple-700/10 p-4 h-32 dark:bg-sky-400/20 dark:border-0">
                        <p class="text-purple-700 dark:text-sky-200">Relative parent</p>
                        <div
                            class="absolute bottom-0 left-0 bg-purple-500 shadow-lg rounded-lg p-4 text-white dark:bg-sky-500">
                            <p>Absolute child</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <h2 class="max-w-md mx-auto text-center text-gray-800 mb-12">绝对定位元素 </h2>
        <div class="relative rounded-xl overflow-auto p-8">
            <div class="space-y-8">
                <div>
                    <p class="text-sm text-slate-500 font-medium mb-4">With static positioning</p>
                    <div class="relative text-sm font-medium leading-6">
                        <div
                            class="relative bg-indigo-400/20 border border-indigo-700/10 rounded-lg p-4 dark:bg-indigo-900/80 dark:border-0">
                            <p class="text-indigo-700 -mt-2 mb-2 dark:text-indigo-200">Relative parent</p>
                            <div
                                class="static bg-indigo-400/20 border border-indigo-700/10 p-4 h-32 flex flex-col justify-between dark:border-0">
                                <p class="text-indigo-700 dark:text-indigo-200">Static parent</p>
                                <div class="flex gap-4">
                                    <div class=" bottom-0 left-0 bg-indigo-500 shadow-lg rounded-lg p-4 text-white">
                                        <p>Static child</p>
                                    </div>
                                    <div class="bg-indigo-100 shadow-lg rounded-lg p-4 text-indigo-600">
                                        <p>Static sibling</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <p class="text-sm text-slate-500 font-medium mb-4">With absolute positioning</p>
                    <div class="relative text-sm font-medium leading-6">
                        <div
                            class="relative bg-indigo-400/20 border border-indigo-700/10 rounded-lg p-4 dark:bg-indigo-900/80 dark:border-0">
                            <p class="text-indigo-700 -mt-2 mb-2 dark:text-indigo-200">Relative parent</p>
                            <div
                                class="static bg-indigo-400/20 border border-indigo-700/10 p-4 h-32 flex flex-col justify-between dark:border-0">
                                <p class="text-indigo-700 dark:text-indigo-200">Static parent</p>
                                <div class="flex gap-4">
                                    <div
                                        class="absolute top-0 right-0 bg-indigo-500 shadow-lg rounded-lg p-4 text-white">
                                        <p>Absolute child</p>
                                    </div>
                                    <div class="bg-indigo-100 shadow-lg rounded-lg p-4 text-indigo-600">
                                        <p>Static sibling</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2 class="max-w-md mx-auto text-center text-gray-800 mb-12">fixed, 都跑到窗口界面最头上了</h2>
        <div class="relative rounded-xl overflow-auto">
            <div class="px-3">
                <div
                    class="relative max-w-md mx-auto bg-white dark:bg-slate-800 shadow-lg h-80 overflow-hidden ring-1 ring-slate-900/5">
                    <!-- <div class=" absolute top-0 left-0 right-0 px-4 py-3 flex items-center font-semibold text-sm -->
                    <div class="fixed  top-0 left-0 right-0 px-4 py-3 flex items-center font-semibold text-sm
                    text-slate-900 dark:text-slate-200 bg-slate-50/90 dark:bg-slate-700/90
                    backdrop-blur-sm ring-1 ring-slate-900/10 dark:ring-black/10">
                        Contacts
                    </div>
                    <div class="overflow-auto flex flex-col divide-y h-80 dark:divide-slate-200/5">
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew
                                Alfred</strong>
                        </div>
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Debra
                                Houston</strong>
                        </div>
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Jane White</strong>
                        </div>
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Ray Flint</strong>
                        </div>
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Mindy
                                Albrect</strong>
                        </div>
                        <div class="flex items-center gap-4 p-4">
                            <img class="w-12 h-12 rounded-full"
                                src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                            <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">David Arnold</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
</body>

</html>